import { EyeOutlined, EyeInvisibleOutlined } from '@ant-design/icons-vue';
import { editingLayers, keydownCondPairs } from '../common.js';
import { picState } from './use-task.js';
import { SwitchedLayer, lastSelectIndex, switchable } from './use-layer.js';
import { Modal } from 'ant-design-vue';

/** @param {import('../@types/index.js').MemberOf} memberOf */
export function setLayersVisible(memberOf) {
}

/** @param {import('../@types/index.js').Layer} layer */
export function delLayer(layer) {
  picState.value[layer.memberOf] = picState.value[layer.memberOf].filter(o => o != layer);
}

/** @param {import('../@types/index.js').MemberOf} memberOf */
export function clearList(memberOf) {
  Modal.confirm({
    content: `确定要清空${ 'layers' == memberOf ? '标注' : '批注' }吗？`,
    onOk() {
      picState.value[memberOf] = [];
    },
  });
}

/** @param {import('../@types/index.js').Layer | 'all'} v */
export function selectLayer(mode, v, multiple = false) {
  if ('all' == v) {
    editingLayers.value = picState.value.layers;
    return;
  }

  lastSelectIndex.value = picState.value.layers.indexOf(v);
  if (!multiple) {
    editingLayers.value = [v];
    return;
  }

  editingLayers.value.includes(v)
  ? editingLayers.value = editingLayers.value.filter(item => item != v)
  : editingLayers.value.push(v);
}

export const VisibleIcon = memberOf => () => /* picState.value[memberOf].some(v => v.rectBoxProps.visible) ? */ EyeOutlined /* : EyeInvisibleOutlined */;

/** @param {import('../@types/index.js').MemberOf} memberOf  */
export function useLayerCommon(memberOf) {
  keydownCondPairs.push(
    [event => 'Delete' == event.key, () => editingLayers.value.forEach(layer => delLayer(layer))],
    [
      event => 'Escape' == event.key && 'none' != using.value,
      () => using.value = 'none'
    ],
    [
      event => 'Escape' == event.key && 'none' == using.value && 0 < editingLayers.value.length,
      () => editingLayers.value = []
    ],
    [
      event => 'ArrowUp' == event.key && switchable.value.prev,
      () => selectLayer('switch', SwitchedLayer(-1)),
    ],
    [
      event => 'ArrowDown' == event.key && switchable.value.next,
      () => selectLayer('switch', SwitchedLayer(1),)
    ],
  );
}
